<template>
  <div id="webgl"></div>
</template>

<script setup lang="ts">
const ctx1 = document.getElementById("webgl");
const gl = ctx1.getContext("webgl");

/**
 * 创建着色器源码
 * */
// 顶点着色器
// gl_Position vec4(0.0, 0.0, 0.0, 1.0) x, y, z, w齐次坐标（x/w, y/w, z/w）
const VERTEX_SHADER_SOURCE = `
    void main() {
      gl_Position = vec4(0.0, 0.0, 0.0, 1.0);
      gl_PointSize = 30.0;
    }
  `;

// 片元着色器
// gl_FragColor vec4(1.0, 0.0, 0.0, 1.0) r, b, g, a
const FRAGMENT_SHADER_SOURCE = `
    void main() {
      gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
    }
  `;
</script>

<style scoped></style>
